{extend name="common@base/common" /}
{block name="style"}
    <link href="__CSS__/main.min.css" type="text/css" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css"/>
{/block}
{block name="body"}
{include file="muushop/public/_nav"/}
<div class="main-product">
<div id="main-container" class="container">
<div class="product-intro">
    <div class="row">
    <div class="col-md-5">
        <div class="product-pic-box">
            <div class="view">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        {notempty name="product.thumb500"}
                            {volist name="product.thumb500" id="thumb"}
                                <div class="swiper-slide" data-id="{$i}"><img class="slide-img detail-nav-scale" src="{$thumb}"></div>
                            {/volist}
                        {else /}
                            <div class="swiper-slide"><img class="slide-img detail-nav-scale" src="{$product.main_pic}"></div>
                        {/notempty}
                    </div>


                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev swiper-button-white"></div>
                    <div class="swiper-button-next swiper-button-white"></div> <!-- 白色 -->
                </div>
            </div>

            <div class="preview">
                {notempty name="product.thumb100"}
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                    {volist name="product.thumb100" id="thumb"}
                        <div class="swiper-slide" data-id="{$i}"><img class="slide-img detail-nav-scale" src="{$thumb}"></div>
                    {/volist}
                    </div>
                </div>
                {/notempty}
            </div>
        </div>
    </div>
    <div class="col-md-7">
        <div class="product-desc-main">
            <section class="product-desc">
                <h3 class="title-section" data-type="title" data-id="{$product.id}">{$product['title']}</h3>
                <p>{$product['description']}</p>
            </section>
            <section class="price-section">
                <span class="rmb">￥</span>
                <span class="now-price price">
                    {$product.price}
                </span>
                <span class="ori-price price" style="text-decoration: line-through">
                    ￥{$product.ori_price}
                </span>

            </section>

            {notempty name="$product['sku_table']"}
            <section class="sku-content" data-role="sku-data" data-id="{$product.id}">

                {foreach name="product['sku_table']['table']" item="vo" key="l"} 
                    <dl class="sku-box clearfix">
                        <dt>{$l}</dt>
                        <dd>
                        <ul data-sku="{$l}">
                            {foreach name="vo" item="t" key="k"} 
                            <li class="" data-table="{$l}" data-value="{$t}">{$t}
                                <i></i>
                            </li>
                            {/foreach}
                        </ul>
                        </dd>
                    </dl>
                {/foreach}
                <input type="hidden" >
            </section>
            {/notempty}

            <section class="count-content clearfix">
                <div class="name">数量</div>
                <div class="sku-type count-box clearfix">
                    <button class="count-btn cut-btn big-text border-box">-</button>
                    <input class="count-input border-box" type="text" value="1" readonly>
                    <button class="count-btn add-btn big-text border-box">+</button>
                </div>

                <div class="repertory-box">
                    <div class="quantity">剩余库存：(<span>{$product['quantity']}</span>)</div>
                </div>
            </section>

            {notempty name="$product['extra_info']"}
            
                <section class="info-section linear-section vertical-box linear-noinput">
                    <span class="linear-title vertical-box">产品参数</span>
                <span class="linear-right vertical-box">
                    <span>
                        <img class="info-icon" src="__IMG__/go.png">
                    </span>
                </span>
                </section>
                <div class="info-content last-liner-section" style="display: none;">

                    <php>
                    foreach($product['extra_info'] as $info){
                    </php>
                        <p>
                            <span class="info-ukey"><php> echo $info['ukey'] </php></span>：
                            <span class="info-data"><php> echo $info['data'] </php></span>
                        </p>
                    <php>
                    }
                    </php>
                </div>
            {/notempty}

            <section class="buybtn-content">
                <div class="">
                    {eq name="$product['quantity']" value="0"}
                    <button class="btn btn-muushop color-disable">已经卖光啦</button>
                    {else /}
                    <button class="buyNow btn btn-danger btn-muushop" data-role="buy-now" data-url="{:url('muushop/api/cart',['action'=>'add'])}">立即购买</button>
                    <button class="addCartNow btn btn-info btn-muushop" data-role="add-cart" data-url="{:url('muushop/api/cart',['action'=>'add'])}">加入购物车</button>
                    {/eq}
                </div>
            </section>
            </div>
        </div>
    </div>
</div>

<div class="product-info-main">

    <div id="detail">
        <div class="clearfix">
            <ul class="nav nav-pills">
                <li class="active"><a href="#productContent">商品介绍</a></li>
                <li><a href="#service">售后保障</a></li>
                {notempty name="evaluate"}
                <li><a href="#comment">评价嗮图</a></li>
                {/notempty}
            </ul>
        </div>
    </div>
    <div class="detail-margin">
        <section id="productContent" name="productContent">
            <div class="html-box">
                {$product['content']}
            </div>
        </section>
        <section id="service" name="service">
            <div class="mt">
              <h3>售后保障</h3>
            </div>
            <div class="html-box service-box">
                {$service}
            </div>
        </section>
        {notempty name="$evaluate"}
        <section id="comment" name="comment">
            <div class="html-box">
                {:hook('evaluateList',['app'=>'muushop','model'=>'product','row_id'=>$product['id']])}
            </div>
        </section>
        {/notempty}
    </div>
</div>
</div>
<!--隐藏域-->
<input type="hidden" data-toggle="product_id" value='{$product.id}' />
<input type="hidden" data-toggle="product_sku" value='{$product_sku}' />
</div>
<!--引入JS-->
<script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
<script src="__JS__/common.min.js"></script>
<script src="__JS__/sku/sku.min.js"></script>
<script src="__JS__/product.min.js"></script>
{/block}